@import './reset.scss';


// header
$header-hg:72px;
$border:1px solid;
header{
    width: 100%;
    height: $header-hg;
    border-bottom: $border #cccccc;
    background-color: #ffffff;
    position: fixed;
    top: 0px;
    z-index: 100;
}
header .wrap{
    width: 1150px;
    height: $header-hg;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

header .wrap{
    .logo-wrap{
        width: 195px;
        height: 42px;
        float: left;
        }
    .location{
        width: 171px;
        height: 22px;
        margin-left: 27px;
       
    }
}
header .wrap{
    .location{
        .address{
            display: inline-block;
            font-size: 12px;
            width: 70px;
            span{
                margin-left: 0px;
                line-height: 20px;
            }
        }
        .city{
            font-size: 12px;
            display: inline-block;
            margin-left: 24px;
            width: 65px;
            height: 22px;
            background-color: #cccccc;
            color: #f5f5f5;
            font-weight: 500;
            text-align: center;
            line-height: 22px;
        }
       
    }
}

header .wrap{
    .headnav{
        width: 360px;
        height: 72px;
        margin-left: 60px;
        font-size: 16px;
        ul{
            height: 72px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            li{
                height: 72px;
                line-height: 72px;
            }
        a{
            color: #595959;
            &:hover{color: #dabc7a}
            &.ac{
                color: #c81653;
                background: #eee;
            }
        }
    }
}
}
//下拉菜单
header .wrap .headnav ul li .dropdown {
    position: absolute;
    left: 0px;
    top: 71px;
    height: 100px;
    width: 100%;
    border-bottom : 1px solid #9b9b9b;
    li{
        height: 100px;
    }
     display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    display: none;
}
header .wrap .headnav ul li .dropdown li{
    width: 100%;
    align-items: center;
    display: flex;
    justify-content: space-around;
    li{ 
        display: flex;
        flex-direction: column;
        align-items: center;
        float: left;
    }
}
//滑过时下拉菜单显示
header .wrap .headnav ul .hav:hover{
    .dropdown{
        display: block;
    } 
}
header .wrap .headnav ul .hav .dropdown .cake li:hover span{
    color: #dabc7a;
}

// toolbox
header .wrap .toolbox{
  width: 260px;
  height: 40px;
  margin-left: 120px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  a{
    display: inline-block;
    width: 22px;
    height: 23px;
  }
  button{
    background-color:white;
    width: 82px;
    height: 30px;
    font-size: 12px;
  }
  //购物车
  #car{
    position: relative;
  span{
      position: absolute;
      top: 4px;
      left: 4px;
      color: #c81653;
      font-size: 13px;
  }
}
.login-success{
  b{
    font-weight: normal;
  }
//  display: none;
}
  //搜索
  .search-bar{
      position: absolute;
      width: 100%;
      height: 50px;
      left: 0px;
      top: 72px;
      z-index: 5;
      background-color: rgba(0, 0, 0, .66);
      display: none;
      .search-input{
          width: 1000px;
          height: 28px;
          line-height: 28px;
          font-size: 17px;
          margin-left:150px;
          margin-top: 11px;
      }
      #start-search{
          background-image: url('/images/search.jpg');
          width: 22px;
          height: 22px;
          position: absolute;
          right: 120px;
          top: 14px;
          opacity: .8;
      }
      .show{
          width: 1000px;
          height: 200px;
          margin-left: 150px;
          margin-top: 10px;
          background-color: white;
        //   border: 1px solid red;
          color: black;
          font-size: 15px;
          overflow: hidden;
          display: none;
      }

  }
}